<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>天勤科技测试题</title>
    <link rel="stylesheet" href="css/tk_main01.css" type="text/css" />
    <script src="js/tk_main01.js"></script>
    <script src="js/echarts.js"></script>
</head>
<body>
    <header>
        <div class="wrapper flex">
            <div class="logo">LOGO</div>
            <div class="hright flex"> 
                <a href="#"><svg t="1663253750052" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1086" width="200" height="200"><path d="M672 501.44c0 88.192-71.776 160-160 160s-160-71.808-160-160c0-88.256 71.776-160 160-160s160 71.744 160 160m209.472-104.96a31.776 31.776 0 0 0-32.832-23.2 62.688 62.688 0 0 1-16.64-1.152 63.808 63.808 0 0 1-42.88-30.72 63.744 63.744 0 0 1 2.112-67.488 32 32 0 0 0-3.68-39.968c-19.584-20.16-41.632-37.248-64.832-52.544-35.808-23.616-74.976-41.92-116.864-52.448a31.968 31.968 0 0 0-36.48 16.832 63.68 63.68 0 0 1-57.28 35.616h-0.192a63.68 63.68 0 0 1-57.28-35.616 32 32 0 0 0-36.48-16.832c-41.92 10.56-81.056 28.832-116.864 52.48-23.2 15.264-45.248 32.352-64.832 52.512a32 32 0 0 0-3.712 40 63.68 63.68 0 0 1 2.112 67.456A63.392 63.392 0 0 1 192 372.032a62.816 62.816 0 0 1-16.672 1.28 31.52 31.52 0 0 0-32.8 23.168A383.136 383.136 0 0 0 128 501.44c0 35.616 4.864 70.912 14.528 104.864a31.904 31.904 0 0 0 32.8 23.2c5.664-0.32 11.264 0.224 16.672 1.312a63.776 63.776 0 0 1 40.736 98.048 32 32 0 0 0 3.712 40c19.584 20.16 41.632 37.248 64.8 52.544 35.84 23.68 74.976 41.92 116.896 52.416a31.936 31.936 0 0 0 36.48-16.832A63.648 63.648 0 0 1 512 821.44c24.512 0 46.496 13.632 57.376 35.584a32 32 0 0 0 36.48 16.832c41.92-10.496 81.056-28.768 116.864-52.416 23.2-15.296 45.248-32.384 64.832-52.576a32 32 0 0 0 3.68-39.968 63.68 63.68 0 0 1-2.112-67.456c9.408-16.32 24.992-27.2 42.88-30.72a65.28 65.28 0 0 1 16.64-1.184c15.04 0.896 28.704-8.736 32.832-23.2A384.64 384.64 0 0 0 896 501.44c0-35.648-4.896-70.944-14.528-104.928" p-id="1087"></path></svg></a>
                <a href="#"><svg t="1663253794628" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1225" width="200" height="200"><path d="M512 878.56c48.96 0 91.296-25.504 114.56-63.04h-229.12a134.304 134.304 0 0 0 114.56 63.04M858.144 733.504l2.24-1.088c-17.664-33.12-63.424-128.992-63.424-174.176v-158.336C796.96 249.984 669.12 128 512 128c-157.12 0-284.928 121.984-284.928 271.904v160.672c0 39.52-38.88 126.272-63.36 171.68l2.24 1.12a30.24 30.24 0 0 0-5.952 17.184c0 17.664 15.04 32 33.536 32h160.48v-1.056H696v1.056h134.496c18.496 0 33.504-14.336 33.504-32 0-6.4-2.464-12.032-5.856-17.056" p-id="1226"></path></svg></a>
                <a href="#">Log Out</a>   
            </div>
        </div>
    </header>
    <main class="wrapper">
        <div class="top-flex wrapper">
            <div class="top">
                <div class="bfont">Audience Overview</div>
                <div class="sfont">Roseville, CA</div>
            </div>
            <div class="nav">
                <ul class="flex nav_bar">
                    <li><a href="#" class="nav_items">DASHBOARD</a></li>
                    <li><a href="#" class="nav_items">PROJECTS</a></li>
                    <li><a href="#" class="nav_items">CALENDAR</a></li>
                    <li><a href="#" class="nav_items">MAILBOX</a></li>
                    <li><a href="#" class="nav_items">SETTING</a></li>
                </ul>
            </div>
        </div>
        <div class="flex wrapper row1">
            <div class="analystic">
                <div class="box">
                    <div class="left">
                        <a href="javascript:;"><</a>
                    </div>
                    <div class="right">
                        <a href="javascript:;">></a>
                    </div>
                    <ul class="img">
                        <li><a href="javascript:;"><img src="images/show1.png" alt=""></a></li>
                        <li><a href="javascript:;"><img src="images/show2.png" alt=""></a></li>
                        <li><a href="javascript:;"><img src="images/show3.png" alt=""></a></li>
                        <li><a href="javascript:;"><img src="images/show4.png" alt=""></a></li>
                    </ul>
                    <ol class="circle">
                    </ol>
                </div>
            </div>
            <div class="support">
                <div class="r1">
                    <div class="sp1">Support Requests</div>
                    <a class="sp2" href="#"><div>View All</div></a>
                </div>
                <hr/>
                <table class="table">
                    <tr>
                        <th>TIME</th>
                        <th>USER NAME</th>
                        <th>STATUS</th>
                    </tr>
                    <tr>
                        <td>9:45pm</td>
                        <td>info@design.com</td>
                        <td><div>Solved</div></td>
                    </tr>
                    <tr>
                        <td>9:45pm</td>
                        <td>info@design.com</td>
                        <td><div>Solved</div></td>
                    </tr>
                </table>
            </div>
        </div>
        
        <div class="echart wrapper" id="echart1">

        </div>
        <div class="flex wrapper row3">
            <div id="echart2"></div>
            <div id="echart3"></div>
        </div>
    </main>
    <footer>
        <div class="wrapper flex">
            <div class="logo">LOGO</div>
            <div class="foot-flex">
                <div class="foot-items">
                    <ul class="foot-list">
                        <li>
                            <span>
                                <a href="#">NEWS</a>
                            </span>
                        </li>
                        <li>
                            <span>
                                <a href="#">CHANNELS</a>
                            </span>
                        </li>
                        <li>
                            <span>
                                <a href="#">OVERVIEW</a>
                            </span>
                        </li>
                        <li>
                            <span>
                                <a href="#">TIMELINE</a>
                            </span>
                        </li>
                    </ul>
                    <ul class="foot-list">
                        <li>
                            <span>
                                <a href="#">SPORT</a>
                            </span>
                        </li>
                        <li>
                            <span>
                                <a href="#">CULTURE</a>
                            </span>
                        </li>
                        <li>
                            <span>
                                <a href="#">NATURE</a>
                            </span>
                        </li>
                        <li>
                            <span>
                                <a href="#">MUSIC</a>
                            </span>
                        </li>
                    </ul>
                    <ul class="foot-list">
                        <li>
                            <span>
                                <a href="#">WEATHER</a>
                            </span>
                        </li>
                        <li>
                            <span>
                                <a href="#">AUTOS</a>
                            </span>
                        </li>
                        <li>
                            <span>
                                <a href="#">LOCAL</a>
                            </span>
                        </li>
                        <li>
                            <span>
                                <a href="#">SHOP</a>
                            </span>
                        </li>
                    </ul>
                    <ul class="foot-list">
                        <li>
                            <span>
                                <a href="#">FUTURE</a>
                            </span>
                        </li>
                        <li>
                            <span>
                                <a href="#">FOOD</a>
                            </span>
                        </li>
                        <li>
                            <span>
                                <a href="#">EARTH</a>
                            </span>
                        </li>
                        <li>
                            <span>
                                <a href="#">TV</a>
                            </span>
                        </li>
                    </ul>
                    <ul class="foot-list">
                        <li>
                            <span>
                                <a href="#">TRAVEL</a>
                            </span>
                        </li>
                        <li>
                            <span>
                                <a href="#">RADIO</a>
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>   
</body>
</html>

